<template>
  <div class="mt-4" style="position:relative;top: 3.7rem;left: 10%;width: 90%;">
    <div class="container-fluid">
      <div class="card">
        <div class="card-body">
          <div class="col-12 p-0 mb-4">
            <p><i class="zi zi_minus zi_rotate90 p-0 m-0" style="color: blue" ></i> 基础设置</p>
          </div>

          <div class="mt-5 offset-1">
            <table cellspacing="" cellpadding="14" class="col-4">
              <thead>

              <tr >
                <td>平台名称&nbsp;<span style="color: red">*</span></td>
                <td><input type="text" class="form-control" placeholder="请输入平台名称" v-model="editSettings.name"></td>
              </tr>



              <tr >
                <td>联系方式&nbsp;<span style="color: red">*</span></td>
                <td><input type="text" class="form-control" placeholder="平台联系方式" v-model="editSettings.phone"></td>
              </tr>



              <tr valign="top" >
                <td>平台简介&nbsp;<span style="color: red">*</span></td>
                <td><textarea class="form-control" style="height: 100px"v-model="editSettings.description"></textarea></td>
              </tr>
              </thead>





            </table>
          </div>

          <div class="col-12 p-0 mb-4">
            <p><i class="zi zi_minus zi_rotate90 p-0 m-0" style="color: blue" ></i> 堂食设置</p>
          </div>
          <div class="mt-5 offset-1">
            <table cellspacing="" cellpadding="14" class="col-8">
              <tbody>

              <tr valign="top">
                <td >结账模式&nbsp;<span style="color: red">*</span></td>
                <td align="left">
                  <el-checkbox-group v-model="Checkout_mode">
                    <el-checkbox label="先结账再就餐"></el-checkbox>
                    <el-checkbox label="先就餐再结账"></el-checkbox>
                  </el-checkbox-group>
                  <small style="color: #999999">先结算再就餐：指用户下单后需要先支付，商家才打印订单，此模式下不支持用户自行加菜退菜操作<br>
                    先就餐再结算：指用户下单后，商家立即打印订单，此模式下支持用户自行加菜操作，但有很大的逃单风险，请谨慎开启</small>
                </td>
              </tr>

              <tr valign="top">
                <td >点餐模式&nbsp;<span style="color: red">*</span></td>
                <td align="left">
                  <el-checkbox-group v-model="orderCheck">
                    <el-checkbox label="多人点餐"></el-checkbox>
                    <el-checkbox label="拼桌点餐"></el-checkbox>
                  </el-checkbox-group>
                  <small style="color: #999999">多人点餐：指同桌用户可以同时加菜并可以互相看到点菜内容<br>
                    拼桌点餐：多人共用一桌，各自独立点餐下单</small>
                </td>
              </tr>
              <tr valign="top">
                <td >买单支持&nbsp;<span style="color: red">*</span></td>
                <td align="left">
                  <el-checkbox-group v-model="Pay_support">
                    <el-checkbox label="优惠券" disabled></el-checkbox>
                    <el-checkbox label="会员折扣"></el-checkbox>
                  </el-checkbox-group>
                  <small style="color: #999999">优惠券暂未开放</small>
                </td>
              </tr>


              <tr class="mt-2 ml-5">
                <td></td>
                <td>
                  <b-button class="btn btn-success" @click="editSetting"><i class="fa fa-paper-plane mr-1"></i> 修改</b-button>
                </td>
              </tr>
              </tbody>
            </table>
          </div>


        </div>
      </div>
    </div>
  </div>
</template>

<script>
import service from "../utils/axios";
export default {
  name: "BasicSettings",
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      Checkout_mode: ['先结账再就餐',],
      orderCheck: ['多人点餐'],
      Pay_support: ['会员折扣'],
      editSettings:{
        id:"",
        address:"",
        description:"",
        logoUrl:"",
        name:"",
        phone:"",
        endTime:"",
        startTime:"",
        status:""
      }
    };
  },
  methods: {
    selectSettings:function (){
      service.get("/settingsBasic/select").then(data=> {
        this.editSettings = data.data.data
      })
    },

    editSetting: function (){
      service.put("/settingsBasic/editSettingsBasic",{
        "id":this.editSettings.id,
        "address":null,
        "description":this.editSettings.description,
        "logoUrl":null,
        "name":this.editSettings.name,
        "phone":this.editSettings.phone,
        "endTime":null,
        "startTime":null,
        "status":""
      }).then(data=>{
        alert("修改成功")
      }).catch(error=>{
        alert("失败")
      })
    },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    change(){
      var file =  document.getElementById('ShopImgSelect').files[0];
      var re = new FileReader();
      re.readAsDataURL(file);
      re.onload = function(re){
        $('#ShopImg').attr("src", re.target.result);
        console.log(re.target.result )
      }
    },

  },
  created(){
    this.selectSettings();
  }

}
</script>

<style scoped>

</style>
